<template>
  <view class="category">
    <HeadSearch></HeadSearch>
    <view class="main">
      <!-- 左侧菜单列表 -->
      <view class="menus">
        <view
        :class="['menu-item',subscript===index?'active':'']"
        v-for="(item,index) in menus"
        :key="item"
        @click="menuClick(index)"
        >{{item}}</view>
      </view>
      <!-- 右侧内容 -->
      <view class="content">
        <view
         class="goods-group"
         v-for="item in goods"
         :key="item.cat_id"
        >
          <view class="goods-group-title">{{item.cat_name}}</view>
          <view class="goods-group-content">
            <navigator
             v-for="items in item.children"
             :key="items.cat_id"
             :url="'/pages/goods_list/goods_list?cid='+items.cat_id"
            >
              <u-image
                width="120rpx"
                height="120rpx"
                :src="items.cat_icon"
              ></u-image>
              <view class="cat-name">{{items.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // categories: [],  //商品分类数据
      subscript: 0, //左侧下标
      menus:[],   //左侧菜单数组
      goods:[],  //右侧商品数组
    };
  },
  onLoad() {
    this.categories = [] 
    // 异步
    this.categoryList()
  },
  methods: {
    // 发请求
    async categoryList(){
    this.categories =   await this.$u.get('categories')
    this.menus = this.categories.map(item=>item.cat_name)
    this.goods = this.categories[this.subscript]?.children
    // console.log(this.categories);
    },
    // 左侧点击事件
    menuClick(index){
      // console.log(index);
      this.subscript = index
      this.goods = this.categories[this.subscript]?.children
    }
  },
};
</script>

<style lang="scss">
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    overflow: hidden;
    display: flex;
    .menus {
      width: 182rpx;
      overflow: auto;
      .menu-item {
        text-align: center;
        height: 74rpx;
        line-height: 74rpx;
        color: #666;
      }
      /* 选中的样式 */
      .active {
        color: $themeColor;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4rpx;
          height: 70%;
          background-color: $themeColor;
        }
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .goods-group {
        .goods-group-title {
          height: 74rpx;
          text-align: center;
          line-height: 74rpx;

          &::before,
          &::after {
            content: "/";
            margin: 0 10rpx;
            color: #ccc;
          }
        }

        .goods-group-content {
          display: flex;
          flex-wrap: wrap;
          navigator {
            width: 33.33%;

            display: flex;
            flex-direction: column;
            // 侧轴
            align-items: center;
          }
        }
      }
    }
  }
}
</style>